<template>
  <div ref="chartRef" class="echarts-container"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, watch, onUnmounted } from 'vue';

const props = defineProps({
  option: {
    type: Object,
    default: () => ({})
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  }
});

const chartRef = ref(null);
let chartInstance = null;

// 初始化图表
onMounted(() => {
  chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption(props.option);
});

// 监听 option 变化并更新图表
watch(() => props.option, (newOption) => {
  if (chartInstance) {
    chartInstance.setOption(newOption);
  }
}, { deep: true });

// 销毁图表实例
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>
.echarts-container {
  width: 100%;
  height: 100%;
}
</style>